.dx-loadindicator-image {
    background-image: @IOS7_LOADINDICATOR_BACKGROUND;
}

.dx-loadindicator-icon {
    position: relative;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;

    .dx-loadindicator-segment {
        position: absolute;
        width: 11%;
        height: 34%;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        background: @IOS7_LOAD_INDICATOR_SEGMENT;
        .border-radius(80%);
        .animation(dx-ios-loadindicator-opacity 1s linear infinite);
    }

    @-webkit-keyframes dx-ios-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @-moz-keyframes dx-ios-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @-ms-keyframes dx-ios-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @-o-keyframes dx-ios-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes dx-ios-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .dx-loadindicator-segment0 {
        .transform(rotate(0deg) translate(0, -142%));
        .animation-delay(0s);
    }

    .dx-loadindicator-segment1 {
        .transform(rotate(30deg) translate(0, -142%));
        .animation-delay(-0.9167s);
    }

    .dx-loadindicator-segment2 {
        .transform(rotate(60deg) translate(0, -142%));
        .animation-delay(-0.833s);
    }

    .dx-loadindicator-segment3 {
        .transform(rotate(90deg) translate(0, -142%));
        .animation-delay(-0.75s);
    }

    .dx-loadindicator-segment4 {
        .transform(rotate(120deg) translate(0, -142%));
        .animation-delay(-0.667s);
    }

    .dx-loadindicator-segment5 {
        .transform(rotate(150deg) translate(0, -142%));
        .animation-delay(-0.5833s);
    }

    .dx-loadindicator-segment6 {
        .transform(rotate(180deg) translate(0, -142%));
        .animation-delay(-0.5s);
    }

    .dx-loadindicator-segment7 {
        .transform(rotate(210deg) translate(0, -142%));
        .animation-delay(-0.41667s);
    }

    .dx-loadindicator-segment8 {
        .transform(rotate(240deg) translate(0, -142%));
        .animation-delay(-0.333s);
    }

    .dx-loadindicator-segment9 {
        .transform(rotate(270deg) translate(0, -142%));
        .animation-delay(-0.25s);
    }

    .dx-loadindicator-segment10 {
        .transform(rotate(300deg) translate(0, -142%));
        .animation-delay(-0.1667s);
    }

    .dx-loadindicator-segment11 {
        .transform(rotate(330deg) translate(0, -142%));
        .animation-delay(-0.0833s);
    }

    .dx-loadindicator-segment12,
    .dx-loadindicator-segment13,
    .dx-loadindicator-segment14,
    .dx-loadindicator-segment15,
    .dx-loadindicator-segment16  {
        display: none;
    }
}

.dx-rtl .dx-loadindicator-icon {
    right: 15%;
    left: 0;
}
